<template>
  <div class="box">
    <div class="margin-lr title">今日作业</div>
    <div class="margin-lr border"></div>
    <div class="gauge-box-work">
      <div class="gauge-item">
        <div id="gauge1" class="gauge"></div>
        <div class="gauge-tip">30%</div>
        <div class="gauge-center">500<span>KM</span></div>
        <div class="gauge-title">行驶里程</div>
      </div>
      <div class="gauge-item">
        <div id="gauge2" class="gauge"></div>
        <div class="gauge-tip">30%</div>
        <div class="gauge-center">500<span>KM</span></div>
        <div class="gauge-title">行驶里程</div>
      </div>
    </div>
    <div class="margin-lr title">今日出勤</div>
    <div class="margin-lr border"></div>
    <div class="gauge-box-attendance">
      <div class="gauge-item">
        <div id="gauge3" class="gauge"></div>
        <div class="gauge-center">
          82%
          <div><span>108</span>/118</div>
        </div>
        <div class="gauge-title">行驶里程</div>
      </div>
      <div class="gauge-item">
        <div id="gauge4" class="gauge"></div>
        <div class="gauge-center">
          99%
          <div><span>108</span>/118</div>
        </div>
        <div class="gauge-title">行驶里程</div>
      </div>
    </div>
    <div class="margin-lr title">今日油耗</div>
    <div class="margin-lr border"></div>
    <div class="box-oil">
      <div id="line" class="line"></div>
    </div>
  </div>
</template>

<script>
import { Gauge, Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  mounted() {
    this.gauge1();
    this.gauge2();
    this.gauge3();
    this.gauge4();
    this.line();
  },
  methods: {
    line() {
      const data = [
        {
          date: "00:00",
          value: 0,
          category: "洒水车",
        },
        {
          date: "00:00",
          value: 0,
          category: "清扫车",
        },
        {
          date: "00:00",
          value: 0,
          category: "清运车",
        },
        {
          date: "00:00",
          value: 0,
          category: "提示",
        },
        {
          date: "08:00",
          value: 0,
          category: "洒水车",
        },
        {
          date: "08:00",
          value: 0,
          category: "清扫车",
        },
        {
          date: "08:00",
          value: 80,
          category: "清运车",
        },
        {
          date: "08:00",
          value: 70,
          category: "提示",
        },
        {
          date: "16:00",
          value: 0,
          category: "洒水车",
        },
        {
          date: "16:00",
          value: 7,
          category: "清扫车",
        },
        {
          date: "16:00",
          value: 150,
          category: "清运车",
        },
        {
          date: "16:00",
          value: 100,
          category: "提示",
        },
        {
          date: "24:00",
          value: 0,
          category: "洒水车",
        },
        {
          date: "24:00",
          value: 0,
          category: "清扫车",
        },
        {
          date: "24:00",
          value: 0,
          category: "清运车",
        },
        {
          date: "24:00",
          value: 0,
          category: "提示",
        },
      ];
      const line = new Line("line", {
        data,
        xField: "date",
        yField: "value",
        seriesField: "category",
      });

      line.render();
    },
    gauge1() {
      const gauge = new Gauge("gauge1", {
        percent: 0.5,
        range: {
          // 辅助圆弧的颜色色板
          color: "l(0) 0:#187FFF 1:#12E6F2",
          width: 5,
        },
        indicator: null,
        gaugeStyle: {
          lineCap: "round",
        },
      });

      gauge.render();
    },
    gauge2() {
      const gauge = new Gauge("gauge2", {
        percent: 0.5,
        range: {
          // 辅助圆弧的颜色色板
          color: "l(0) 0:#26E896 1:#07AEE7",
          width: 5,
        },
        indicator: null,
        gaugeStyle: {
          lineCap: "round",
        },
      });

      gauge.render();
    },
    gauge3() {
      const gauge = new Gauge("gauge3", {
        percent: 0.5,
        range: {
          // 辅助圆弧的颜色色板
          color: "l(0) 0:#26E896 1:#07AEE7",
          width: 3,
        },
        indicator: null,
        gaugeStyle: {
          lineCap: "round",
        },
      });

      gauge.render();
    },
    gauge4() {
      const gauge = new Gauge("gauge4", {
        percent: 0.5,
        range: {
          // 辅助圆弧的颜色色板
          color: "l(0) 0:#26E896 1:#07AEE7",
          width: 3,
        },
        indicator: null,
        gaugeStyle: {
          lineCap: "round",
        },
      });

      gauge.render();
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 320px;
  height: 702px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}
.margin-lr {
  margin: 0 12px 0 15px;
}
.title {
  padding-top: 12px;
  padding-bottom: 5px;
  height: 20px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.85);
}
.border {
  height: 1px;
  background: #12e6f2;
  opacity: 0.2;
}
.gauge-box-work {
  display: flex;
  height: 140px;
  align-items: center;
  justify-items: center;
  .gauge-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
  }
  .gauge {
    width: 80px;
    height: 80px;
    transform: rotateY(180deg) rotate(110deg);
    /* transform: rotate(10deg); */
  }
  .gauge-tip {
    position: absolute;
    top: -6%;
    right: 16%;
    font-size: 12px;
    font-family: "STHeiti";
    color: rgba(255, 255, 255, 0.65);
  }
  .gauge-center {
    position: absolute;
    top: 18%;
    left: 42%;
    font-family: STHeiti;
    color: #ffffff;
    font-size: 24px;
  }
  .gauge-center span {
    font-size: 10px;
  }
  .gauge-title {
    height: 17px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 17px;
    margin-top: 8px;
  }
}
.gauge-box-attendance {
  display: flex;
  height: 120px;
  align-items: center;
  justify-items: center;
  .gauge-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
  }
  .gauge {
    width: 80px;
    height: 80px;
  }
  .gauge-center {
    position: absolute;
    top: 28%;
    left: 50%;
    font-family: STHeiti;
    color: #ffffff;
    font-size: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gauge-center div {
    font-size: 10px;
    font-family: STHeiti;
    color: rgba(255, 255, 255, 0.6);
  }
  .gauge-center div span {
    color: #12e6f2;
  }
  .gauge-title {
    height: 17px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 17px;
  }
}
.box-oil {
  display: flex;
  height: 145px;
  align-items: center;
  justify-items: center;
  .line {
    // width: 177px;
    width: 177px;
    height: 116px;
  }
}
</style>
